<template>
  <div class="home">
    <top name="运维机房动力环境监控大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homemain">
      <div class="homemainl">
        <div class="item1">
          <item icon="icon-kongtiao" name="空调实时监测" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item icon="icon-wenshidu" name="温湿度实时曲线图" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item icon="icon-shigushangbao-xuanzhong" name="设备状态" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homemainc">
        <div class="item0">
          <item9></item9>
        </div>
<!--        3d机房-->
        <div class="item1">
          <item10></item10>
        </div>
        <div class="item2">
          <div class="item2s">
            <items name="机房温湿度">
              <item7></item7>
            </items>
          </div>
          <div class="item2s">
            <items name="UPS电源" :delay="0.5">
              <item8></item8>
            </items>
          </div>
        </div>
      </div>
      <div class="homemainr">
        <div class="item1">
          <item icon="icon-tixing" name="告警信息" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item icon="icon-shigushangbao-xuanzhong" name="告警列表" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item icon="icon-shexiangtou" name="视频监控" :duration="0.5" :delay="1">
            <item6 @getPop="getPop"></item6>
          </item>
        </div>
      </div>
    </div>
    <pop ref="pop"></pop>
  </div>
</template>

<script>
import top from "./components/top/index.vue";
import item from "./components/item/index.vue";
import items from "./components/items/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/index.vue";
import item3 from "./components/item3/index.vue";
import item4 from "./components/item4/index.vue";
import item5 from "./components/item5/index.vue";
import item6 from "./components/item6/index.vue";
import item7 from "./components/item7/index.vue";
import item8 from "./components/item8/index.vue";
import item9 from "./components/item9/index.vue";
import item10 from "./components/item10/index.vue";
import WOW from "wow.js";
import pop from "@/components/pop/index.vue";

export default {
  data() {
    return {
      list: [],
    }
  },
  components: {
    top,
    item,
    items,
    item1,
    item2,
    item3,
    item4,
    item5,
    item6,
    item7,
    item8,
    item9,
    item10,
    pop
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },
  methods: {
    getPop(e) {
      if (e.status == '在线') {
        this.$refs.pop.getShow(e)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  background: url("../assets/bg.png");
  background-size: 100% 100%;
}

.homemain {
  position: relative;
  width: calc(100% - 0px);
  height: calc(100% - 96px - 30px);
  display: flex;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  .homemainl {
    width: calc(23% - 30px);
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    margin-left: 30px;
    z-index: 10;

    .item1 {
      width: calc(100% - 0px);
      height: calc(33.3% - 10px);
      position: relative;
    }
  }

  .homemainc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;
    width: calc(54% - 60px);
    height: 100%;
    z-index: 0;

    .item0 {
      width: 100%;
      height: 100px;
      display: flex;
      z-index: 101;
      position: relative;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .item1 {
      width: 100%;
      height: calc(66.66% - 120px);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .item2 {
      width: 100%;
      height: calc(33.33% - 10px);
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .item2s {
        width: calc(50% - 10px);
        position: relative;
        height: 100%;
      }
    }
  }

  .homemainr {
    width: calc(23% - 30px);
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    margin-right: 30px;
    z-index: 1;

    .item1 {
      width: calc(100% - 0px);
      height: calc(33.33% - 10px);
      position: relative;
    }
  }
}
</style>
